<template>
  <div>
    <div class="kylin-form">
      <div class="ky-div kylin-upload">
        <div class="div-title">{{ $t("configure.upload_excel") }}</div>
        <div class="div-status">
          <span class="el-icon-loading loading" v-if="loading"></span>
          <span class="el-icon-success success" v-else-if="logId"></span>
        </div>
        <div class="div-content">
          <div class="content-upload">
            <el-upload
              :show-file-list="false"
              :headers="header"
              class="left"
              :action="action"
              accept=".xls"
              :file-list="fileList"
              :before-upload="beforeUpload"
              :on-success="handleSuccess"
              :on-error="handleError"
            >
              <el-button class="kylin-button">
                {{ $t("upload") }}
              </el-button>
            </el-upload>
            <el-button class="kylin-button" @click="downloadTemplate">
              {{ $t("excel_template_download") }}
            </el-button>
          </div>
          <div class="ky-text">
            {{ $t("configure.file_format_description") }}
          </div>
          <div class="ky-text data-example">
            <span style="width: 75px">{{ $t("configure.data_example") }}</span>
            <div class="example">
              <span>IP：10.2.3.12;</span>
              <span>{{ $t("configure.system_example") }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="ky-div kylin-parse">
        <div class="div-title">{{ $t("configure.analysis_suse") }}</div>
        <div class="div-status">
          <span class="el-icon-loading loading" v-if="logId && successCount==0 && failedCount==0"></span>
          <span class="el-icon-error error" v-else-if="logId && failedCount > 0"></span>
          <span class="el-icon-success success" v-else-if="logId && failedCount == 0 "></span>
        </div>
        <div class="div-content" v-if="logId">
          <div>{{ $t("configure.host_analysis_success") }}{{`${successCount}-${sum}`}}{{$t("configure.platform")}}</div>
          <div class="ky-text">{{ $t("configure.host_analysis_error") }}{{`${failedCount}-${sum}`}}{{$t("configure.platform")}}</div>
        </div>
      </div>
      <div class="ky-div kylin-output">
        <div class="div-title">
          {{ $t("configure.output_difference_file") }}
        </div>
        <div class="div-status">
          <span class="el-icon-loading loading" v-if="logId && libNames.length == 0 && timer"></span>
          <span class="el-icon-error error" v-else-if="logId && libNames.length == 0 && timer==null"></span>
          <span class="el-icon-success success" v-else-if="logId && libNames.length > 0"></span>
        </div>
        <div class="div-content" v-if="logId">
          <div>{{ $t("configure.output_some_diffrence_file").replace("%s", libNames.length) }}</div>
          <div class="ky-text">IP:{{libNames.toString()}}</div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="kylin-button" @click="handleOk">{{
        $t("confirm")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {getMigrateDiffStatus} from "@/api/migrate_diff"
import { download } from "@/utils";
import { downloadTemplate } from "@/api/template";
export default {
  data() {
    return {
      fileList: [],
      action: "/api/migrate/diff/create",
      header: { authToken: getToken() },
      logId: "",
      sum: 0,
      failedCount: 0,
      successCount: 0,
      timer: null,
      loading: false,
      libNames: []
    };
  },
  beforeDestroy() {
      if (this.timer) {
          clearInterval(this.timer);
      }
  },
  methods: {
    handleOk() {
      this.logId = "";
      this.$emit("click");
    },
    beforeUpload(){
        this.loading = true
    },
    handleSuccess(res) {
      this.loading = false;
      if (res.code == "0") {
        this.$message({
          type: "success",
          message: res.message,
        });
        this.logId = res.data.logId;
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.fileList = [];
    },
    handleError(res) {
      this.loading = false;
      this.fileList = [];
      this.$message({
        type: "error",
        message: res.message,
      });
    },
    downloadTemplate() {
      downloadTemplate("suse_template").then((res) => {
        download(res, "suse_template");
      });
    },
  },
  watch: {
      logId(newVal) {
          if (newVal && !this.timer) {
              this.timer = setInterval(() => {
                  getMigrateDiffStatus({logId: this.logId}).then(res => {
                      let result = res.data.data;
                      this.failedCount = result.failedCount;
                      this.successCount = result.successCount;
                      this.sum = result.sum;
                      this.libNames = result.libNames
                      if (result.runningCount == 0) {
                          clearInterval(this.timer);
                          this.timer = null;
                      }
                  })
              }, 1000)
          }
      }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.ky-div {
  color: black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .div-title {
    flex: 2;
    font-size: 14px;
    font-weight: 400;
  }
  .div-status {
    flex: 1;
    font-size: 18px;
    .success {
      color: #67C23A;
    }
    .error {
      color: red;
    }
  }
  .div-content {
    flex: 4;
  }
}
.kylin-upload {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
  .content-upload {
    display: flex;
    .left {
      margin-right: 20px;
    }
  }
  .data-example {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .example {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
.kylin-parse {
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.kylin-output {
  margin-top: 20px;
}
.ky-text {
  margin-top: 10px;
}
</style>